<template>
	<div id="big-data-container" class="big-data-container">
		<div class="head">
			<h1>
				<div style="font-size: 28px;">数字化部集中监控平台</div>
			</h1>
		</div>
		<div class="data-container" style="color: floralwhite;">
			<div class="data-head" style="height: 45%; ">
				<div class="data-head-item" style="width: 30%;height:100%;">
					<div class="data-head-item-gdzz"
						style="height: 13%; text-align: center;padding-top: 10px; font-size: 24px; font-weight:550; background-color: #10096a;">
						IT任务</div>
					<div class="data-head-item-gdzz2" style="height: 87%;">
						<div style="float: left; width: 33.33%; height: 100%;">
							<div id="chart-vhead-1-a" style=" width: 100%; height: 60%;"></div>
							<div style=" width: 100%; height: 40%; text-align: center; font-size: 20px;">
								<div>{{ inprogress }}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #f55301;">进行中</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{ total }}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{ notinprogress }}</div>
							</div>
						</div>

						<div style="float: left;width: 33.33%;height: 100%;">

							<div id="chart-vhead-1-b" style=" width: 100%; height: 60%;"></div>
							<div style=" width: 100%; height: 40%; text-align: center; font-size: 20px;">
								<div>{{ completed }}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #5263ff;">已完成</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{ total }}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{ notcompleted }}</div>
							</div>

						</div>
						<div style="float: left;width: 33.33%;height: 100%;">

							<div id="chart-vhead-1-c" style=" width: 100%; height: 60%;"></div>
							<div style=" width: 100%; height: 40%; text-align: center; font-size: 20px;">
								<div>{{ notstarted }}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%; color: #5fb878;">未开始</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">工单：{{ total }}</div>
								<div style="text-align: left;margin-top: 4%; margin-left: 27%;">其他：{{ started }}</div>
							</div>

						</div>
					</div>
				</div>
				<div class="data-head-item" style="width: 30%;height: 100%;">
					<div class="data-head-item-gdzz"
						style="height: 13%; text-align: center;padding-top: 10px; font-size: 24px; font-weight:550; background-color: #10096a;">
						数字化部服务满意度调查</div>
					<div class="data-head-item-gdzz2" style="height: 87%; width:100%;">
						<div id="chart-vhead-2" style="width:100%;height:100%;">

						</div>
					</div>
				</div>
				<div class="data-head-item" style="width: 40%;height: 100%;">
					<div class="data-head-item-gdzz"
						style="height: 13%; text-align: center;padding-top: 10px; font-size: 24px; font-weight:550; background-color: #10096a;">
						已完成IT任务</div>
					<div class="data-head-item-gdzz2" style="height: 87%; ">
						<el-table :data="tableData2" height="100%" border style="width: 100%">
							<el-table-column prop="progress" label="进度" width="120">
								<template v-slot="scope">
									<el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.progress"
										:color="customColorGreen"></el-progress>
								</template>
							</el-table-column>
							<el-table-column prop="tc_departname" label="提出部门" width="120">
							</el-table-column>
							<el-table-column prop="zeren" label="责任人" width="120">
							</el-table-column>
							<el-table-column prop="q_decribe" label="问题描述">
								<template v-slot="scope">
									<p v-html='scope.row.q_decribe'></p>
								</template>
							</el-table-column>
							<el-table-column prop="a_decribe" label="进度说明">
								<template v-slot="scope">
									<p v-html='scope.row.a_decribe'></p>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div id="data-center" style=" margin-top: 15px; height: 55%;">
				<div class="data-center-item"
					style="height: 13%; text-align: center;padding-top: 15px; font-size: 24px; font-weight:550; background-color: #10096a;">
					未完成IT任务追踪
				</div>
				<div class="data-center-item" style=" height: 85%;">
					<el-table ref="table" :data="tableData" height="100%" border style="width: 100%">
						<el-table-column prop="progress" label="进度" width="200">
							<template v-slot="scope">
								<el-progress :text-inside="true" :stroke-width="18" :percentage="scope.row.progress"
									:color="customColor"></el-progress>
							</template>
						</el-table-column>
						<el-table-column prop="rec_datetime" label="受理时间" width="200">
						</el-table-column>
						<el-table-column prop="tc_departname" label="提出部门" width="200">
						</el-table-column>
						<el-table-column prop="tc_ren" label="提出人" width="200">
						</el-table-column>
						<el-table-column prop="zeren" label="责任人" width="200">
						</el-table-column>
						<el-table-column prop="q_decribe" label="问题描述">
							<template v-slot="scope">
								<p v-html='scope.row.q_decribe'></p>
							</template>
						</el-table-column>
						<el-table-column prop="a_decribe" label="进度说明">
							<template v-slot="scope">
								<p v-html='scope.row.a_decribe'></p>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
var echarts = require("echarts");
let $charthead2,
	$charthead1a,
	$charthead1b,
	$charthead1c;
import {
	charthead1a,
	charthead1b,
	charthead2,
	charthead1c,
} from "./chart-optionsnew";
import "./layout2.less";
import http from "@/api/http.js";
export default {
	components: {
		// "iview-circle": IviewCircle
	},
	data() {
		return {
			head2Total: 0,
			notstarted: 0,
			inprogress: 0,
			completed: 0,
			total: 0,
			notinprogress: 0,
			notcompleted: 0,
			started: 0,
			tableData: [],
			tableData2: [],
			chartHeadArry: [],
			percentages: 100,
			customColor: '#f56c6c',
			customColorGreen: '#67c23a',
			customColors: [
				{ color: '#d9d9d9', progress: 0 },
				{ color: '#f56c6c', progress: 20 },
				{ color: '#e6a23c', progress: 40 },
				{ color: '#6f7ad3', progress: 60 },
				{ color: '#1989fa', progress: 80 },
				{ color: '#5cb87a', progress: 100 }
			]
		};
	},
	created() {
		console.log("chart");
	},
	methods: {

	},
	mounted() {
		if ($charthead2) {
			$charthead2.dispose();
			$charthead1a.dispose();
			$charthead1b.dispose();
			$charthead1c.dispose();
		}

		$charthead1a = echarts.init(document.getElementById("chart-vhead-1-a"));
		$charthead1b = echarts.init(document.getElementById("chart-vhead-1-b"));
		$charthead1c = echarts.init(document.getElementById("chart-vhead-1-c"));
		let url_1a = "/api/digitaldata/getCcTackInfo";
		http.post(url_1a, {}, true).then((s) => {
			var jsonArr1 = [];
			var jsonArr2 = [];
			var jsonArr3 = [];
			this.notstarted = s[0].num;
			this.inprogress = s[1].num;
			this.completed = s[2].num;
			this.total = s[0].num + s[1].num + s[2].num;
			this.notinprogress = s[0].num + s[2].num;
			this.notcompleted = s[0].num + s[1].num;
			this.started = s[1].num + s[2].num;

			let exp = /\.{0,1}0+$/g;
			let inprogressPercent = this.inprogress * 100 / this.total;
			inprogressPercent = inprogressPercent.toFixed(2);
			inprogressPercent = inprogressPercent.replace(exp, "");
			let completedPercent = this.completed * 100 / this.total;
			completedPercent = completedPercent.toFixed(2);
			completedPercent = completedPercent.replace(exp, "");
			let notstartedPercent = this.notstarted * 100 / this.total;
			notstartedPercent = notstartedPercent.toFixed(2);
			notstartedPercent = notstartedPercent.replace(exp, "");
			jsonArr1.push({
				value: this.inprogress,
				name: "进行中"
			});
			jsonArr1.push({
				value: this.notinprogress,
				name: "其他"
			})
			jsonArr2.push({
				value: this.completed,
				name: "已完成"
			});
			jsonArr2.push({
				value: this.notcompleted,
				name: "其他"
			})
			jsonArr3.push({
				value: this.notstarted,
				name: "未开始"
			});
			jsonArr3.push({
				value: this.started,
				name: "其他"
			})
			charthead1a.series[0].data = jsonArr1;
			charthead1a.series[1].data[0].value = inprogressPercent;
			$charthead1a.setOption(charthead1a, true);
			charthead1b.series[0].data = jsonArr2;
			charthead1b.series[1].data[0].value = completedPercent;
			$charthead1b.setOption(charthead1b, true);
			charthead1c.series[0].data = jsonArr3;
			charthead1c.series[1].data[0].value = notstartedPercent;
			$charthead1c.setOption(charthead1c, true);
		});
		$charthead2 = echarts.init(document.getElementById("chart-vhead-2"));

		let url = "/api/digitaldata/getItSurveyInfo";
		http.post(url, {}, true).then((s) => {
			var jsonArr = [];
			var total = 0;
			for (var i = 0; i < s.list1.length; i++) {
				var value = s.list1[i];
				var name = s.list2[i];
				total = Number(total) + Number(value);
				jsonArr.push({
					value: value,
					name: name
				});
			}
			this.chartHeadArry = jsonArr;
			console.log("jsonArr ----  " + jsonArr);
			console.log("chartHeadArry ----  " + this.chartHeadArry);

			let charthead2 = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					itemGap: 15,
					itemWidth: 30,
					itemHeight: 20,
					orient: 'vertical',
					right: 10,
					top: 20,
					textStyle: {
						color: '#ffffff',
						fontSize: 16,
					},
					formatter: function (name) {
						let data = jsonArr;
						let total = 0;
						let tarValue = 0;
						for (let i = 0; i < data.length; i++) {
							total += parseInt(data[i].value);
							if (data[i].name == name) {
								tarValue = data[i].value;
							}
						}
						let arr = [name + '  ', +' ' + parseInt(tarValue) + '个', '  ' + ((tarValue / total) * 100).toFixed(2) + '%']
						return arr.join('')
					}
				},
				toolbox: {
					show: false,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				series: [{
					name: '评价',
					type: 'pie',
					radius: ['55%', '90%'],
					center: ['30%', '50%'],
					/* selectedOffset:0,
					selectedMode:false, */
					data: [
						//{ value: 38, name: '5 星' },
						// { value: 26, name: '1 星' } 
					],
					label: {
						show: false,
					},
					labelLine: {
						show: false
					},
					emphasis: {
						label: {
							show: false,
							fontSize: 40,
							fontWeight: 'bold'
						}
					},
				},
				//内圈百分比
				{
					type: "pie",
					center: ["30%", "50%"],
					radius: ["00%", "55%"], //内圆的半径，第一个为内半径，第二个为外半径
					avoidLabelOverlap: false,
					color: ["#000042"],
					data: [{
						hoverOffset: 1,
						value: "0",
						position: "center",
						name: "",
						itemStyle: {
							color: "#000042",
						},
						label: {
							normal: {
								formatter: "评价总数\n\n{c}",
								textStyle: {
									fontWeight: "normal",
									fontSize: 22,
								},
								show: true,
								position: "center",
								color: "#fff",
							},
						},
						labelLine: {
							normal: {
								smooth: true,
								lineStyle: {
									width: 0,
								},
							},
						},
						hoverAnimation: false,
					},],
				},
				]
			};

			charthead2.series[0].data = jsonArr;
			charthead2.series[1].data[0].value = total;
			$charthead2.setOption(charthead2, true);
		});

		let urltask = "/api/digitaldata/getCctaskList";
		http.post(urltask, {}, true).then((s) => {
			this.tableData = s;
		});
		let urltask2 = "/api/digitaldata/getCctaskOfFinishList";
		http.post(urltask2, {}, true).then((s) => {
			this.tableData2 = s;
		});
	},
	destroyed() {
		$charthead1a = null;
		$charthead1b = null;
		$charthead1c = null;
		$charthead2 = null;

	},
};

</script>

<style>
.data-head>div {
	float: left;
}

.data-head-item {
	border: 1px solid rgba(25, 186, 139, 0.17);
	padding: 0 0.2rem 0.4rem 0.15rem;
	background: rgba(255, 255, 255, 0.04);
	background-size: 100% auto;
	position: relative;
	margin-bottom: 0.15rem;
	z-index: 10;
}

.data-head-item-gdzz {
	text-align: center;
	color: white;
	font-size: 28px;
	position: relative;
	margin-bottom: 0.15rem;
}

.data-center-item {
	border: 1px solid rgba(25, 186, 139, 0.17);
	padding: 0 0.2rem 0.4rem 0.15rem;
	background: rgba(255, 255, 255, 0.04);
	background-size: 100% auto;
	position: relative;
	margin-bottom: 0.15rem;
	z-index: 10;
}

.data-center-item {
	border: 1px solid rgba(25, 186, 139, 0.17);
	padding: 0 0.2rem 0.4rem 0.15rem;
	background: rgba(255, 255, 255, 0.04);
	background-size: 100% auto;
	position: relative;
	margin-bottom: 0.15rem;
	z-index: 10;

}

.table-container {
	width: 100%;
	height: auto;
	background-color: #190e52;
}

.el-table__cell {
	background-color: #190e52;
	color: #fff;
	font-size: 15px;
}

.cell {
	background-color: #190e52;
	color: #fff;
	font-size: 15px;
}

/* #017590 */
.el-table th.el-table__cell {
	background-color: #190e52;
}

.el-table {
	--el-table-row-hover-bg-color: #190e52;
	--el-table-tr-bg-color: #190e52;
	--el-table-border-color: #017590;
	/* --el-table-border:3px #017590 solid; */
}

.el-table .el-table__cell {
	border: 2.8px #017590 solid;
}

.el-progress-bar__innerText {
	font-size: 15px;
}
</style>